<template>
    <view>
        <canvas canvas-id="canvas4renovate":style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" style="letter-spacing: -1rpx;" v-show="!needLongTapSaveImg"></canvas>
        <image :src="tempFilePath" :style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" v-show="needLongTapSaveImg"></image>
        <button type="default" @click="downLoadImg()">保存至相册</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                renovationInfo: {},
                windowWidth: 0,
                windowHeight: 0,
                tempFilePath: '',
                needLongTapSaveImg: false,
            }
        },
        onLoad(options) {
            // this.renovationInfo = JSON.parse(options.apply);
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = res.windowWidth;
                    this.windowHeight = res.windowHeight;　　　　　　　　　　　　
					this.createImg();
                }
            })
        },
        methods: {
            createImg: function(){
                const ctx = uni.createCanvasContext('canvas4renovate');
                ctx.drawImage('/static/images/logo.png', 0, 0, this.windowWidth, this.windowWidth * 1.77);
                ctx.font = 'bold 16rpx serif';
                ctx.setTextAlign('left');
                ctx.setFillStyle('#5A3834');
                ctx.fillText('编号:' + this.renovationInfo.rId, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.44);
                ctx.fillText('单位:' + this.renovationInfo.company, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.505);
                ctx.fillText('负责人:' + this.renovationInfo.personMain, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.57);
                ctx.fillText('联系电话:' + this.renovationInfo.tel, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.63);
                ctx.font = 'bold 12rpx serif';
                ctx.fillText('有效期:' + this.renovationInfo.startTimeView + '至' + this.renovationInfo.endTimeView, this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.83);
                ctx.fillText('公司:XXX', this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.86);
                ctx.draw(true, () => {
                    setTimeout(() => {
                        uni.canvasToTempFilePath({
                            canvasId: 'canvas4renovate',
                            fileType: 'jpg',
                            success: (res) => {
                                this.tempFilePath = res.tempFilePath
                                //#ifdef H5
                                this.needLongTapSaveImg = true;
                                //#endif
                            }
                        })
                    })
                })
            },
            downLoadImg: function() {
                if(this.tempFilePath == ''){
                    uni.showToast({
                        title: '图片未生成',
                        icon: 'none'
                    })
                    return;
                }
                //#ifndef H5
                uni.saveImageToPhotosAlbum({
                    filePath: this.tempFilePath,
                    success: function() {
                        uni.showToast({
                            title: '已保存至相册',
                            icon: 'none'
                        })
                    }
                });
                //#endif
                //#ifdef H5
                uni.showToast({
                    title: '请长按图片-保存至相册'
                })
                //#endif
            }

        }
    }
</script>

<style>
</style>